<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过渡动画</title>
    <style>
        /* 显示/隐藏的过渡效果 */
        .xxx-enter-active,
        .xxx-leave-active {
            transition: opacity 1s;
        }

        /* 隐藏时的样式 */
        .xxx-enter,
        .xxx-leave-to {
            opacity: 0;
        }

        /* 显示的过渡效果 */
        .move-enter-active {
            transition: all 1s;
        }

        /* 隐藏的过渡效果 */
        .move-leave-active {
            transition: all 3s;
        }

        /* 隐藏时的样式 */
        .move-enter,
        .move-leave-to {
            opacity: 0;
            transform: translateX(20px)
        }
    </style>
</head>

<body>
    <div id="app1">
        <button @click="isShow=!isShow">toggle1</button><br>
        <transition name="xxx">
            <p v-show="isShow" class="xxx-enter-to">hello</p>
        </transition>
    </div>
    <div id="app2">
        <button @click="isShow=!isShow">toggle1</button><br>
        <transition name="move">
            <p v-show="isShow">hello</p>
        </transition>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script>
        new Vue({
            el: '#app1',
            data() {
                return {
                    isShow: true
                }
            },

        })
        new Vue({
            el: '#app2',
            data() {
                return {
                    isShow: true
                }
            },

        })
    </script>
</body>

</html>